<template>
  <div
    ref="ball"
    class="drag-ball"
    :style="{
      left: position.x + 'px',
      top: position.y + 'px',
      zIndex: 9999,
      transition: isDragging ? 'none' : 'all 0.3s ease'
    }"
    @mousedown="startDrag"
    @touchstart="startDrag"
  >
    <div id="side-windows">
      <div class="shrink">
        <div class="problem-feedback" >
          <img :src="feedback" class="logo" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import feedbackImg from '@/assets/images/logo.svg'

const props = defineProps({
  distanceRight: { type: Number, default: 50 },
  distanceBottom: { type: Number, default: 100 },
  snapThreshold: { type: Number, default: 100 } // 吸附阈值(px)
})

// 状态管理
const ball = ref(null)
const feedback = ref(feedbackImg);
const position = ref({ x: 0, y: 0 })
const isDragging = ref(false)
const startOffset = ref({ x: 0, y: 0 })
const ballSize = ref({ width: 0, height: 0 })
const windowSize = ref({ width: window.innerWidth, height: window.innerHeight })

// 初始化
onMounted(() => {
  updateWindowSize()
  window.addEventListener('resize', updateWindowSize)

  if (ball.value) {
    const rect = ball.value.getBoundingClientRect()
    ballSize.value = { width: rect.width, height: rect.height }

    // 设置初始位置
    position.value = {
      x: windowSize.value.width - ballSize.value.width - props.distanceRight,
      y: windowSize.value.height - ballSize.value.height - props.distanceBottom
    }
  }

})

onUnmounted(() => {
  window.removeEventListener('resize', updateWindowSize)
})

// 更新窗口尺寸
const updateWindowSize = () => {
  windowSize.value = {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  }
}

// 开始拖动
const startDrag = (e) => {
  isDragging.value = true

  // 获取初始点击位置
  const clientX = e.clientX || e.touches[0].clientX
  const clientY = e.clientY || e.touches[0].clientY

  // 计算点击位置相对于元素左上角的偏移
  startOffset.value = {
    x: clientX - position.value.x,
    y: clientY - position.value.y
  }

  // 添加事件监听
  document.addEventListener('mousemove', dragMove)
  document.addEventListener('mouseup', endDrag)
  document.addEventListener('touchmove', dragMove, { passive: false })
  document.addEventListener('touchend', endDrag)

  // 阻止默认行为（避免文本选中）
  e.preventDefault()
}

// 拖动中
const dragMove = (e) => {
  if (!isDragging.value) return

  const clientX = e.clientX || (e.touches && e.touches[0].clientX)
  const clientY = e.clientY || (e.touches && e.touches[0].clientY)

  if (clientX === undefined || clientY === undefined) return

  // 计算新位置
  let newX = clientX - startOffset.value.x
  let newY = clientY - startOffset.value.y

  // 边界检查
  newX = Math.max(0, Math.min(windowSize.value.width - ballSize.value.width, newX))
  newY = Math.max(0, Math.min(windowSize.value.height - ballSize.value.height, newY))

  // 更新位置
  position.value = { x: newX, y: newY }

  // 阻止页面滚动
  e.preventDefault()
}

// 结束拖动（吸附逻辑）
const endDrag = () => {
  isDragging.value = false

  // 移除事件监听
  document.removeEventListener('mousemove', dragMove)
  document.removeEventListener('mouseup', endDrag)
  document.removeEventListener('touchmove', dragMove)
  document.removeEventListener('touchend', endDrag)

  // 应用吸附效果
  applySnapEffect()
}

// 应用吸附效果
const applySnapEffect = () => {
  const centerX = position.value.x + ballSize.value.width / 2
  const centerY = position.value.y + ballSize.value.height / 2

  // 计算到各边缘的距离
  const toLeft = centerX
  const toRight = windowSize.value.width - centerX
  const toTop = centerY
  const toBottom = windowSize.value.height - centerY

  // 确定最近的边缘
  const minDistance = Math.min(toLeft, toRight, toTop, toBottom)

  if (minDistance < props.snapThreshold) {
    if (minDistance === toLeft) {
      position.value.x = 0
    } else if (minDistance === toRight) {
      position.value.x = windowSize.value.width - ballSize.value.width
    } else if (minDistance === toTop) {
      position.value.y = 0
    } else if (minDistance === toBottom) {
      position.value.y = windowSize.value.height - ballSize.value.height
    }
  }
}

// 问题反馈
const showDialog = () => {
  const url = 'https://example.com/feedback'
  window.open(url, '_blank')
}
</script>

<style scoped lang="scss">
.drag-ball {
  position: fixed;
  cursor: grab;
  user-select: none;
  z-index: 9999;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  //background: #242b3a;
  box-shadow: 0px 6px 16px -8px rgba(0, 0, 0, 0.08),
  0px 9px 28px 0px rgba(0, 0, 0, 0.05),
  0px 12px 48px 16px rgba(0, 0, 0, 0.03);
  border-radius: 23px;
  text-align: center;
  color: #fff;

  &:active {
    cursor: grabbing;
  }

  #side-windows {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;

    .problem-feedback {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;

      img {
        width: 24px;
        height: 24px;
        margin-bottom: 8px;
      }

      p {
        font-size: 12px;
        line-height: 1.4;
        margin: 0;
      }

      .logo {
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: 0 auto; /* 左右自动居中 */
      }
    }
  }
}
</style>
